<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>科技感满满搜索标签页</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .search-bar, .card, .pagination button {
      border-radius: 20px;
    }
    .search-bar {
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom right, #007bff, #00b3ff);
    }
    .search-bar input {
      border: none;
      padding: 10px 20px;
      width: 100%;
      outline: none;
      background-color: transparent;
      color: #fff;
    }
    .search-bar button {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      border: none;
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
      border-radius: 0 20px 20px 0;
      transition: background-color 0.3s;
    }
    .search-bar button:hover {
      background-color: #0056b3;
    }
    .card-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 20px;
    }
    .card {
      flex-basis: calc(33% - 5px);
      background-color: #f8f9fa;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
      margin-bottom: 20px;
    }
    .card:hover {
      transform: translateY(-5px);
    }
    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .card-description {
      font-size: 14px;
      color: #6c757d;
    }
    .card-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
    .card-buttons button {
      padding: 5px 10px;
      border-radius: 5px;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .card-buttons button:hover {
      background-color: #0056b3;
    }
    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .pagination button {
      padding: 5px 10px;
      border-radius: 5px;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s;
      margin: 0 5px;
    }
    .pagination button:hover {
      background-color: #0056b3;
    }

    .filter-options {
      margin-top: 10px;
    }
    .loading-indicator {
      text-align: center;
      margin-top: 20px;
      display: none;
    }
    .no-results {
      text-align: center;
      margin-top: 20px;
      color: #6c757d;
      display: none;
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
      .card {
        flex-basis: 100%;
      }
      .card-buttons {
        display: flex;
        margin-top: 4px;
        justify-content: space-between;
      }
      .card-buttons button {
        margin-bottom: 10px;
        width: 30%;
      }
    }

    /* Dark Theme */
    .dark-theme {
      background-color: #222;
      color: #fff;
    }
    .dark-theme .search-bar {
      background-color: #000;
      background-image: linear-gradient(to bottom right, #007bff, #00b3ff);
    }
    .dark-theme .card {
      background-color: #333;
      color: #fff;
    }
    .dark-theme .card-description {
      color: #ccc;
    }
    .dark-theme .card-buttons button {
      background-color: #007bff;
      color: #fff;
    }
    .dark-theme .card-buttons button:hover {
      background-color: #0056b3;
    }
    .dark-theme .pagination button {
      background-color: #007bff;
      color: #fff;
    }
    .dark-theme .pagination button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="search-bar">
          <input type="text" id="search-input" placeholder="Search..." />
          <button type="button" id="search-button">Search</button>
        </div>
        <div class="filter-options">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="filterOption" id="titleFilter" value="title" checked>
            <label class="form-check-label" for="titleFilter">Filter by Title</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="filterOption" id="descriptionFilter" value="description">
            <label class="form-check-label" for="descriptionFilter">Filter by Description</label>
          </div>
        </div>
        <div class="card-container">
          <!-- Cards will be dynamically generated here -->
        </div>
        <div class="loading-indicator">
          <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
        <div class="no-results">
          <p>No results found. Please try a different search.</p>
        </div>
        <div class="pagination">
          <button id="prev-button">Previous</button>
          <button id="next-button">Next</button>
          <input type="number" id="page-input" min="1" value="1">
          <button id="go-button">Go</button>
        </div>
        <button id="theme-toggle">Toggle Theme</button>
      </div>
    </div>
  </div>

  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.slim.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/2.5.4/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    const themeToggle = document.getElementById('theme-toggle');
    const body = document.body;
    const prevButton = document.getElementById('prev-button');
    const nextButton = document.getElementById('next-button');
    const pageInput = document.getElementById('page-input');
    const goButton = document.getElementById('go-button');
    const cardsPerPage = 6;
    let currentPage = 1;
    let cards = [];

    // 假数据,实际情况下应从服务器获取
    const dummyData = [
      { title: 'Card 1', description: 'This is the description for Card 1.' },
      { title: 'Card 2', description: 'This is the description for Card 2.' },
      { title: 'Card 3', description: 'This is the description for Card 3.' },
      { title: 'Another Card', description: 'This is another card description.' },
      { title: 'Tech Card', description: 'A card related to technology.' },
      { title: 'Science Card', description: 'A card about science topics.' },
      { title: 'Nature Card', description: 'This card is about nature.' },
      { title: 'Travel Card', description: 'A card for travel enthusiasts.' },
      { title: 'Lifestyle Card', description: 'This card covers lifestyle topics.' },
      { title: 'Food Card', description: 'A card all about food and recipes.' },
    ];

    function createCardElement(card) {
      const cardElement = document.createElement('div');
      cardElement.classList.add('card');
      cardElement.innerHTML = `
        <h3 class="card-title">${card.title}</h3>
        <p class="card-description">${card.description}</p>
        <div class="card-buttons">
          <button class="run-button">Run</button>
          <button class="edit-button">Edit</button>
        </div>
      `;
      return cardElement;
    }

    function renderCards(cardsToRender) {
      const cardContainer = document.querySelector('.card-container');
      const documentFragment = document.createDocumentFragment();
      cardsToRender.forEach(card => {
        const cardElement = createCardElement(card);
        documentFragment.appendChild(cardElement);
      });
      cardContainer.innerHTML = '';
      cardContainer.appendChild(documentFragment);
    }

    function filterCards(searchTerm, filterOption) {
      return dummyData.filter(card => {
        const searchValue = filterOption === 'title' ? card.title.toLowerCase() : card.description.toLowerCase();
        return searchValue.includes(searchTerm.toLowerCase());
      });
    }

    function toggleVisibility(element, visible) {
      element.style.display = visible ? 'block' : 'none';
    }

    function handleSearch() {
      const loadingIndicator = document.querySelector('.loading-indicator');
      const noResults = document.querySelector('.no-results');
      toggleVisibility(loadingIndicator, true);

      const searchTerm = document.getElementById('search-input').value;
      const filterOption = document.querySelector('input[name="filterOption"]:checked').value;
      const filteredCards = filterCards(searchTerm, filterOption);
      cards = filteredCards;
      renderCards(getCardsForCurrentPage());
      updatePagination();

      toggleVisibility(loadingIndicator, false);
      toggleVisibility(noResults, filteredCards.length === 0);
    }

    function getCardsForCurrentPage() {
      const startIndex = (currentPage - 1) * cardsPerPage;
      const endIndex = startIndex + cardsPerPage;
      return cards.slice(startIndex, endIndex);
    }

    function updatePagination() {
      const totalPages = Math.ceil(cards.length / cardsPerPage);
      pageInput.value = currentPage;
      prevButton.disabled = currentPage === 1;
      nextButton.disabled = currentPage === totalPages;
      const cardsToRender = getCardsForCurrentPage();
      renderCards(cardsToRender);
    }

    themeToggle.addEventListener('click', () => {
      body.classList.toggle('dark-theme');
    });

    prevButton.addEventListener('click', () => {
      if (currentPage > 1) {
        currentPage--;
        updatePagination();
      }
    });

    nextButton.addEventListener('click', () => {
      const totalPages = Math.ceil(cards.length / cardsPerPage);
      if (currentPage < totalPages) {
        currentPage++;
        updatePagination();
      }
    });

    goButton.addEventListener('click', () => {
      const totalPages = Math.ceil(cards.length / cardsPerPage);
      const inputPage = parseInt(pageInput.value);
      if (inputPage >= 1 && inputPage <= totalPages) {
        currentPage = inputPage;
        updatePagination();
      }
    });

    document.getElementById('search-button').addEventListener('click', handleSearch);
    document.getElementById('search-input').addEventListener('input', handleSearch);
    document.querySelectorAll('input[name="filterOption"]').forEach(radio => {
      radio.addEventListener('change', handleSearch);
    });

    // 初始渲染
    cards = dummyData;
    renderCards(getCardsForCurrentPage());
    updatePagination();
  </script>
</body>
</html>
